<!-- TheQualificationItem.vue - 教育和工作经历时间线组件 -->
<template>
  <!-- 遍历经历列表，创建时间线项目 -->
  <div class="qualification__data" v-for="(item,index) in list" :key="index">
    <!-- 奇数项（右侧）的时间线装饰 -->
    <template v-if="index % 2 === 1">
      <div></div>
      <div>
        <!-- 时间线圆点 -->
        <span class="qualification__rounder"></span>
        <!-- 时间线连接线（除最后一项外） -->
        <span v-if="index !== list?.length - 1 " class="qualification__line"></span>
      </div>
    </template>

    <!-- 经历内容 -->
    <div class="qualification__content">
      <!-- 经历标题，使用i18n国际化 -->
      <h3 class="qualification__title">
        {{ $t(item.title || '') }}
      </h3>
      <!-- 经历描述，使用i18n国际化 -->
      <span class="qualification__subtitle">
        {{ $t(item.describe || '') }}
      </span>
      <!-- 时间信息，使用i18n国际化 -->
      <div class="qualification__calendar">
        <i class="alicon alicon-rili"></i>
        {{ $t(item.time || '') }}
      </div>
    </div>

    <!-- 偶数项（左侧）的时间线装饰 -->
    <template v-if="index % 2 === 0">
      <div>
        <!-- 时间线圆点 -->
        <span class="qualification__rounder"></span>
        <!-- 时间线连接线（除最后一项外） -->
        <span v-if="index !== list?.length - 1 " class="qualification__line"></span>
      </div>
      <div></div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'TheQualificationItem',
  // 定义组件属性
  props: {
    // 经历列表数据
    list: {
      type: Array
    }
  }
}
</script>

<style lang="scss" scoped>
.qualification {
  /* 时间线项目布局 */
  &__data {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    column-gap: 1.5rem;
    /* 小屏幕适配 */
    @include max-screen(350px) {
      gap: 0.5rem;
    }
  }

  /* 经历内容样式 */
  &__content {
    padding: 0 1rem;
    /* 偶数项（左侧）的内容靠右对齐 */
    .qualification__data:nth-child(even) & {
      text-align: right;
      padding-right: 0;
      padding-left: 1rem;
    }
    /* 奇数项（右侧）的内容靠左对齐 */
    .qualification__data:nth-child(odd) & {
      text-align: left;
      padding-left: 0;
      padding-right: 1rem;
    }
  }

  /* 经历标题样式 */
  &__title {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
  }

  /* 经历描述样式 */
  &__subtitle {
    display: inline-block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-1);
  }

  /* 时间信息样式 */
  &__calendar {
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
  }

  /* 时间线圆点样式 */
  &__rounder {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: var(--first-color);
    border-radius: 50%;
  }

  /* 时间线连接线样式 */
  &__line {
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--first-color);
    transform: translate(6px, -7px);
  }
}
</style>